<!DOCTYPE html>
<html>
  <head>
    <title>Beam WebGL Library</title>
<style>
body { display: flex; margin: 0; height: 100%; }
nav {
  width: 150px;
  height: 100vh;
  overflow: auto;
  cursor: default;
  background: #f1f1f1;
}
ul {
  margin: 0;
  padding: 8px 10px;
  font-size: 14px;
  list-style: none;
  cursor: pointer;
}
a { color: #2254F4; text-decoration: none; } /* Gaoding Blue */
h3 { margin: 8px 10px; }
h4 { margin: 0 10px; font-size: 14px; }
iframe { flex: 1; height: 100vh; }
</style>
  </head>
  <body>
    <nav>
      <!--
      <h3><a href="./" target="_blank">Docs</a></h3>
      -->
      <h3>Examples</h3>
      <hr/>

      <h4>Basic Graphics</h4>
      <ul>
        <li>Hello World</li>
        <li>Basic Ball</li>
        <li>Zooming Ball</li>
        <li>Multi Balls</li>
        <li>Multi Graphics</li>
        <li>Image Box</li>
        <li>Wireframe</li>
      </ul>

      <h4>Image Processing</h4>
      <ul>
        <li>Basic Image</li>
        <li>Texture Config</li>
        <li>Single Filter</li>
        <li>Multi Filters</li>
        <li>Mix Images</li>
        <li>Load SVG</li>
      </ul>

      <h4>3D Models</h4>
      <ul>
        <li>Basic Lighting</li>
        <li>Material Ball</li>
        <li>Material Balls</li>
      </ul>

      <h4>Offscreen</h4>
      <ul>
        <li>Basic Mesh</li>
        <li>Visualize Depth</li>
        <li>Basic Shadow</li>
      </ul>

      <h4>Effects</h4>
      <ul>
        <li>Image Explode</li>
        <li>Conway</li>
      </ul>

      <h4>Design Patterns</h4>
      <ul>
        <li>Define Command</li>
        <li>Build Renderer</li>
      </ul>
    </nav>
    <iframe frameborder="0" scrolling="no"></iframe>
  </body>
<script>
const iframe = document.querySelector('iframe')
iframe.src = window.location.hash
  ? './gallery/pages/' + window.location.hash.replace('#', '') + '.html'
  : './gallery/pages/basic-graphics/hello-world.html'

const toKebab = str => str.split(' ').map(x => x.toLowerCase()).join('-')
const toSrc = (title, li) => `${toKebab(title)}/${toKebab(li)}`

document.querySelectorAll('ul').forEach(ul => {
  const list = [...ul.children]
  const title = ul.previousElementSibling.innerText
  list.forEach(li => {
    li.onclick = () => {
      const src = toSrc(title, li.innerText)
      window.location.hash = src
      iframe.src = './gallery/pages/' + src + '.html'
    }
  })
})
</script>
</html>
